<template>
  <div class="oder-list">
    <el-table :data="orderList" border style="width: 100%" height="100%" :row-class-name="getrowclass">
      <el-table-column prop="create_time" label="比赛时间" width="90">
        <template #default="scope">
          <div class="font_bold">{{ scope.row.match_time == '' ? '--' : scope.row.match_time }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="league_name" label="联赛" show-overflow-tooltip>
        <template #default="scope">
          <div class="font_nobold hidden2">{{ scope.row.league_name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="home_name" label="主队" align="right" show-overflow-tooltip>
        <template #default="scope">
          <div class="font_nobold hidden2">{{ scope.row.home_name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="now_score.score" label="比分" align="center" width="60">
        <template #default="scope">
          <div class="font_ff2e">
            <div>{{ scope.row.now_score.score == '' ? '--' : scope.row.now_score.score }}</div>
            <div>({{ scope.row.order_score.score == '' ? '--' : scope.row.order_score.score }})</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="away_name" label="客队" show-overflow-tooltip>
        <template #default="scope">
          <div class="font_nobold hidden2">{{ scope.row.away_name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="状态" width="86">
        <template #default="scope">
          <div class="font_nobold">
            <div>
              <div
                v-if="scope.row.status.live_time_status == '' || scope.row.status.live_time_status == '未'"
                style="color: #7f908f"
              >
                未
              </div>
              <div v-else style="color: var(--pcmain-color)">{{ scope.row.status.live_time_status }}</div>
            </div>
            <div>
              <div
                v-if="scope.row.status.order_time_status == '' || scope.row.status.order_time_status == '未'"
                style="color: #7f908f"
              >
                未
              </div>
              <div v-else style="color: var(--pcmain-color)" class="timeicons">
                <div class="icon_img" style="margin-right: 4px">
                  <img
                    v-if="scope.row.status.order_time_status > 0 && scope.row.status.order_time_status <= 15"
                    src="@/assets/timeicon/15.png"
                  />
                  <img
                    v-if="scope.row.status.order_time_status > 15 && scope.row.status.order_time_status <= 30"
                    src="@/assets/timeicon/30.png"
                  />
                  <img
                    v-if="scope.row.status.order_time_status > 30 && scope.row.status.order_time_status <= 45"
                    src="@/assets/timeicon/45.png"
                  />
                  <img
                    v-if="scope.row.status.order_time_status > 45 && scope.row.status.order_time_status <= 60"
                    src="@/assets/timeicon/60.png"
                  />
                  <img
                    v-if="scope.row.status.order_time_status > 60 && scope.row.status.order_time_status <= 75"
                    src="@/assets/timeicon/75.png"
                  />
                  <img
                    v-if="scope.row.status.order_time_status > 75 && scope.row.status.order_time_status <= 90"
                    src="@/assets/timeicon/90.png"
                  />
                  <img v-if="scope.row.status.order_time_status > 90" src="@/assets/timeicon/90+.png" />
                </div>
                <div>{{ scope.row.status.order_time_status }}'</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pk_odds_key_ch" label="盘口" width="130" show-overflow-tooltip>
        <template #default="scope">
          <div class="font_nobold hidden1">{{ scope.row.pk_odds_key_ch }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="odd" label="赔率" align="center" width="72">
        <template #default="scope">
          <div class="font_bold">
            <div>{{ scope.row.odd.now_odd == '' ? '--' : scope.row.odd.now_odd }}</div>
            <div>{{ scope.row.odd.order_odd == '' ? '--' : `(${scope.row.odd.order_odd})` }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stake" label="下单金额" align="right" width="80">
        <template #default="scope">
          <div class="font_bold" style="color: #ff2e4d">{{ scope.row.stake }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="get_order_date" label="下单时间" width="90">
        <template #default="scope">
          <div class="font_bold">{{ scope.row.get_order_date }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="member" label="下单账号" width="90">
        <template #default="scope">
          <div class="font_bold">{{ scope.row.member }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="更新时间" width="90">
        <template #default="scope">
          <div class="font_bold">{{ scope.row.create_time }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

const props = defineProps({
  orderList: Array,
})

const getrowclass = data => {
  let { row, rowIndex } = data
  const result = isWithinTenSeconds(row.create_time)
  let name = ''
  if (result) {
    name = 'row_class'
  }
  return name
}

const isWithinTenSeconds = inputTime => {
  const inputDate = new Date(inputTime)
  const currentDate = new Date()
  const timeDifference = Math.abs(currentDate - inputDate)
  return timeDifference <= 10000
}
</script>

<style lang="scss" scoped>
.oder-list {
  width: 100%;
  height: calc(100% - 32px);
}

.font_bold {
  font-size: 12px;
  font-weight: bold;
  color: #000;
  display: flex;
  flex-direction: column;
  align-content: center;
}
.font_nobold {
  font-size: 12px;
  color: #000;
}
.font_ff2e {
  font-size: 12px;
  font-weight: bold;
  color: #ff2e4d;
  display: flex;
  flex-direction: column;
  align-content: center;
}
.hidden1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hidden2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon_img img {
  width: 16px;
  height: 16px;
}
.timeicons {
  display: flex;
  align-items: center;
}


</style>

<style>
.oder-list .el-table--border:before {
  width: 0 !important;
}
.oder-list .el-table__border-left-patch {
  width: 0 !important;
}

.oder-list .el-table th.el-table__cell .cell {
  padding: 0 8px;
  line-height: 15px;
  font-weight: 600;
  color: #7f908f;
}
.oder-list .el-table th.el-table__cell {
  height: 32px;
  min-height: 32px;
  background-color: #fff;
}
.oder-list .el-table .cell {
  font-size: 12px;
}
.oder-list .el-table tbody .el-table__cell {
  padding: 4px 0;
}
.oder-list .el-table tbody .cell {
  padding: 0 8px;
}

.oder-list .el-table tbody .el-table__row td:nth-child(2) .el-tooltip,
.oder-list .el-table tbody .el-table__row td:nth-child(3) .el-tooltip,
.oder-list .el-table tbody .el-table__row td:nth-child(5) .el-tooltip {
  white-space: break-spaces !important;
}

.oder-list .el-table tbody .row_class {
  background-color: rgba(255, 46, 77, 0.07);
}
</style>